<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: aliceblue;
    }

    .v-enter-from {
        opacity: 0;
    }

    .v-enter-active {
        /* 过渡 */
        transition: all 2s ease-in;
        /* 动画 */
        animation: 10s shake-from;
    }

    .v-enter-to {
        opacity: 1;
    }


    /* 离场动画类 */
    .v-leave-from {
        opacity: 1;
    }

    .v-leave-active {
        /* 过渡 */
        transition: all 2s ease-in;
        /* 动画 */
        animation: 10s shake-to;
    }

    .v-leave-to {
        opacity: 0;
    }

    @keyframes shake-from {
        0% {
            opacity: 0;
            transform: translateX(0);
        }

        50% {
            opacity: 0.5;
            transform: translateX(50px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes shake-to {
        0% {
            opacity: 1;
            transform: translateX(0);
        }

        50% {
            opacity: 0.5;
            transform: translateX(50px);
        }

        100% {
            opacity: 0;
            transform: translateX(0);
        }
    }

</style>
<!-- Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果  -->

<body>
    <div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "vue动画",
                isShow: false,

            }
        },
        /*
            当 animation 与  transition 设置的时间不一致的时候，可以通过 type 来指定优先级
            <transition type="transition"></transition>
            type="animation"  以自定义动画为主
            type="transition"  以自定义过渡为主

            :duration = "5000" 控制所有效果的时长
            :duration = "{enter: 3000, leave:100}"  // 控制单个的时间
        */
        template: `
            <div>
                <!-- 这里增加一个 name 属性，就可以脱离通用的控制 -->
                <transition type="transition">
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>
               
                <button @click="isShow = !isShow">显示与隐藏</button>    
            </div>
        `

    }).mount("#app");
</script>

</html>